<!DOCTYPE html>
<!--
This is a starter template page. Use this page to start your new project from
scratch. This page gets rid of all links and provides the needed markup only.
-->
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <title>线下任务</title>
    <!-- Font Awesome Icons -->
    <link rel="stylesheet" href="../../../../plugins/fontawesome-free/css/all.min.css">
    <!-- Theme style -->
    <link rel="stylesheet" href="../../../../plugins/sweetalert2-theme-bootstrap-4/bootstrap-4.min.css">
    <link rel="stylesheet" href="../../../../dist/css/adminlte.min.css">
    <!-- Google Font: Source Sans Pro -->
    <link href="../../../../dist/css/fonts.css" rel="stylesheet">
    <link rel="stylesheet" href="../../plugins/select2-bootstrap4-theme/select2-bootstrap4.min.css">
    <link rel="stylesheet" href="../../plugins/select2/css/select2.min.css">
    <style type="text/css">
        .content-img-list {
            display: flex;
        }
        .content-img-list-item {
            width: 100px;
            height: 100px;
        }
        ul {
            list-style-type: none;
            padding: 0px;
            margin: 0px;
        }
        ul li {
            background-repeat: no-repeat;
            background-position: 0px 5px;
        }
    </style>
</head>

<body class="hold-transition sidebar-mini">
    <div class="wrapper">
        <!-- Navbar -->
        <nav class="main-header navbar navbar-expand navbar-white navbar-light" id="navbar_menu">
            <!-- Left navbar links -->
        </nav>
        <!-- /.navbar -->
        <!-- Main Sidebar Container -->
        <aside class="main-sidebar sidebar-dark-primary elevation-4" id="sidebar_menu">
        </aside>

        <!-- Content Wrapper. Contains page content -->
        <div class="content-wrapper">
            <section class="content-header">
                <div class="container-fluid">
                    <div class="row mb-2">
                        <div class="col-sm-6">
                            <h1>线下任务</h1>
                        </div>
                    </div>
                </div>
            </section>

            <div class="col-md-12">
                <div class="card card-primary card-outline card-outline-tabs">
                    <div class="card-header p-0 border-bottom-0">
                        <ul class="nav nav-tabs" id="custom-tabs-four-tab" role="tablist">
                            <li class="nav-item">
                                <a class="nav-link active" id="custom-tabs-allTasks-tab" data-toggle="pill"
                                    href="#custom-tabs-Tasks" role="tab" aria-controls="custom-tabs-allTasks"
                                    aria-selected="true">所有任务</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" id="custom-tabs-pending-tab" data-toggle="pill"
                                    href="#custom-tabs-Tasks" role="tab" aria-controls="custom-tabs-pending"
                                    aria-selected="false">未处理</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" id="custom-tabs-processing-tab" data-toggle="pill"
                                    href="#custom-tabs-Tasks" role="tab" aria-controls="custom-tabs-processing"
                                    aria-selected="false">处理中</a>
                            </li>

                            <li class="nav-item">
                                <a class="nav-link" id="custom-tabs-solved-tab" data-toggle="pill"
                                    href="#custom-tabs-Tasks" role="tab" aria-controls="custom-tabs-solved"
                                    aria-selected="false">已完成</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" id="custom-tabs-solved-tab" data-toggle="pill"
                                    href="#custom-tabs-Tasks" role="tab" aria-controls="custom-tabs-solved"
                                    aria-selected="false">已取消</a>
                            </li>
                        </ul>
                    </div>
                    <div class="card-body">
                        <div class="tab-content" id="custom-tabs-four-tabContent">
                            <div class="tab-pane fade show active" id="#custom-tabs-Tasks" role="tabpanel"
                                aria-labelledby="#custom-tabs-Tasks-tab">
                                <div class="card-body table-responsive p-0">
                                    <table class="table table-hover text-nowrap">
                                        <thead>
                                            <tr>
                                                <th style="text-align: center;">编号</th>
                                                <th style="text-align: center;">称呼</th>
                                                <th style="text-align: center;">性别</th>
                                                <th style="text-align: center;">报修方式</th>
                                                <th style="text-align: center;">报修时间</th>
                                                <th style="text-align: center;">完成时间</th>
                                                <th style="text-align: center;">处理状态</th>
                                                <th style="text-align: center;">操作</th>
                                            </tr>
                                        </thead>
                                        <tbody id="pageBody">
                                            <td valign="top" colspan="8" class="dataTables_empty"
                                                style="text-align:center">
                                                空空如也~
                                            </td>
                                        </tbody>
                                    </table>
                                </div>
                                <!-- /.card-body -->
                                <div class="clearfix">
                                    <ul class="pagination pagination-sm m-0 float-right" id="turnPages">
                                        <li class="page-item dropdown" style="margin-top:-5px" data-page="-2">
                                            <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#">
                                                每页10条 <span class="caret"></span>
                                            </a>
                                            <div class="dropdown-menu">
                                                <a class="dropdown-item" tabindex="5" href=""
                                                    onclick="return false">5</a>
                                                <a class="dropdown-item" tabindex="10" href=""
                                                    onclick="return false">10</a>
                                                <a class="dropdown-item" tabindex="20" href=""
                                                    onclick="return false">20</a>
                                                <a class="dropdown-item" tabindex="30" href=""
                                                    onclick="return false">30</a>
                                                <a class="dropdown-item" tabindex="40" href=""
                                                    onclick="return false">40</a>
                                                <a class="dropdown-item" tabindex="50" href=""
                                                    onclick="return false">50</a>
                                            </div>
                                        </li>
                                        <li class="page-item" data-page="0">
                                            <a class="page-link" href="javascript:void(0);">&laquo;</a>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- /.card -->
                </div>
            </div>

        </div>
    </div>
    <!-- /.content-wrapper -->
    <div class="modal fade" id="modal_detail">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title">任务详情</h4>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <section class="content">
                        <div class="container-fluid">
                            <div class="row">
                                <div class="col-12">
                                    <div class="callout callout-info">
                                        <h5><i class="fas fa-info"></i> 个人信息</h5>

                                        <div class="row">
                                            <label class="col-sm-4 col-form-label" style="text-align: center;">
                                                姓名</label>
                                            <!-- textarea -->
                                            <div class="col-sm-8 col-form-label" id="detail_name">
                                            </div>
                                        </div>
                                        <div class="row">
                                            <label class="col-sm-4 col-form-label" style="text-align: center;">
                                                电话</label>
                                            <!-- textarea -->
                                            <div class="col-sm-8 col-form-label" id="detail_tel">
                                            </div>
                                        </div>
                                        <div class="row">
                                            <label class="col-sm-4 col-form-label" style="text-align: center;">
                                                性别</label>
                                            <!-- textarea -->
                                            <div class="col-sm-8 col-form-label" id="detail_gender">
                                            </div>
                                        </div>
                                        <div class="row">
                                            <label class="col-sm-4 col-form-label" style="text-align: center;">
                                                地址</label>
                                            <!-- textarea -->
                                            <div class="col-sm-8 col-form-label" id="detail_address">
                                            </div>
                                        </div>
                                    </div>
                                    <!-- Main content -->
                                    <div class="invoice p-3 mb-3">
                                        <!-- title row -->
                                        <div class="row">
                                            <div class="col-12">
                                                <h4>
                                                    <i class="fas fa-paperclip"></i> 任务信息
                                                    <small class="float-right" id="detail_startDate"></small>
                                                </h4>
                                            </div>
                                            <!-- /.col -->
                                        </div>
                                        <!-- info row -->
                                        <div class="row">
                                            <label class="col-sm-4 col-form-label" style="text-align: center;">
                                                任务编号</label>
                                            <!-- textarea -->
                                            <div class="col-sm-8 col-form-label" id="detail_id">
                                            </div>
                                        </div>
                                        <div class="row">
                                            <label class="col-sm-4 col-form-label" style="text-align: center;">
                                                报修方式</label>
                                            <!-- textarea -->
                                            <div class="col-sm-8 col-form-label" id="detail_repairMethod">
                                            </div>
                                        </div>
                                        <div class="row">
                                            <label class="col-sm-4 col-form-label" style="text-align: center;">
                                                任务状态</label>
                                            <!-- textarea -->
                                            <div class="col-sm-8 col-form-label" id="detail_status">
                                            </div>
                                        </div>
                                        <div class="row">
                                            <label class="col-sm-4 col-form-label" style="text-align: center;">
                                                电脑型号</label>
                                            <!-- textarea -->
                                            <div class="col-sm-8 col-form-label" id="detail_computerType">
                                            </div>
                                        </div>
                                        <div class="row">
                                            <label class="col-sm-4 col-form-label" style="text-align: center;">
                                                问题描述</label>
                                            <!-- textarea -->
                                            <div class="col-sm-8 col-form-label" id="detail_description">
                                            </div>
                                        </div>

                                        <div class="row">
                                            <label class="col-sm-4 col-form-label" style="text-align: center;">
                                                参与成员</label>
                                            <!-- textarea -->
                                            <div class="col-sm-8">
                                                <select class="select2bs4" multiple="multiple" id="member_select"
                                                    data-placeholder="无成员参与" style="width: 100%;" data-max-options="3">
                                                </select>
                                            </div>
                                        </div>
                                        <div class="row" style="margin-top: 10px;margin-bottom: 10px;">
                                            <label class="col-sm-4 col-form-label" style="text-align: center;">
                                                图片信息</label>
                                            <!-- textarea -->
                                            <!-- <div class="col-sm-10 col-form-label" id="check_picture">
                                            </div> -->
                                            <div class="col-sm-8">
                                                <div class="content-img" style="display: flex;">
                                                    <ul class="content-img-list_show" style="display: flex;">

                                                    </ul>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="row">
                                            <label class="col-sm-4 col-form-label" style="text-align: center;">
                                                完成日期</label>
                                            <!-- textarea -->
                                            <div class="col-sm-8 col-form-label" id="detail_endDate">
                                            </div>
                                        </div>
                                        <div class="row">
                                            <label class="col-sm-4 col-form-label" style="text-align: center;">
                                                历史日志</label>
                                            <!-- textarea -->
                                        </div>
                                        <div class="row">
                                            <div class="col-md-12">
                                                <div class="timeline">

                                                    <div class="time-label" id="timeline_start_detail">

                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <!-- /.invoice -->
                                </div><!-- /.col -->
                            </div><!-- /.row -->
                        </div><!-- /.container-fluid -->
                    </section>
                </div>
                <div class="modal-footer justify-content-between">
                    <button type="button" class="btn btn-default" data-dismiss="modal" id="closeBtn">关闭</button>
                    <button type="button" class="btn btn-primary" id="member_submit_btn">提交</button>
                </div>
            </div>
            <!-- /.modal-content -->
        </div>
        <!-- /.modal-dialog -->
    </div>
    <div class="modal fade" id="modal_log">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title">任务日志</h4>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <div class="row">
                        <div class="col-md-12">
                            <div class="timeline">
                                <div>
                                    <i class="fas fa-edit bg-blue"></i>
                                    <div class="timeline-item">
                                        <div class="timeline-body">
                                            <div class="row">
                                                <div class="col-md-10">
                                                    <textarea class="form-control" rows="3" placeholder="发布一条日志"
                                                        id="log_text"></textarea>
                                                </div>
                                                <div class="col-md-2">
                                                    <button type="button" class="btn btn-primary"
                                                        style="width:100%;height:100%" id="submit_log_btn">发布</button>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="time-label" id="timeline_start_modify">
                                    <span class="bg-blue">历史日志</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer justify-content-between">
                    <button type="button" class="btn btn-default" data-dismiss="modal" id="closeBtn">关闭</button>
                </div>
            </div>
            <!-- /.modal-content -->
        </div>
        <!-- /.modal-dialog -->
    </div>
    <!-- ./wrapper -->
    <!-- REQUIRED SCRIPTS -->
    <!-- jQuery -->
    <script src="../../../../plugins/sweetalert2/sweetalert2.min.js"></script>
    <script src="../../../../plugins/jquery/jquery.min.js"></script>
    <script>
        // 引入左边导航栏
        $.get("../../../../bars/Operator/operator_sidebar.html", function (data) {
            // console.log(data)
            $("#sidebar_menu").html(data);
        })
        //引入上边导航栏 
        $.get("../../../../bars/Operator/operator_navbar.html", function (data) {
            $("#navbar_menu").html(data);
        })
    </script>

    <!-- Bootstrap 4 -->
    <script src="../../../../plugins/bootstrap/js/bootstrap.bundle.min.js"></script>
    <!-- AdminLTE App -->
    <script src="../../../../dist/js/adminlte.min.js"></script>

    <script src="../../plugins/select2/js/select2.full.min.js"></script>

    <script>
        $('.select2bs4').select2({
            theme: 'bootstrap4'
        })
        const Toast = Swal.mixin({
            toast: true,
            showConfirmButton: false,
            timer: 1500
        });
        let page_limit = 10
        let page_current = 1
        let max_page
        let task_list = ""
        let status = "所有状态"
        let imgSrc
        $(function () {
            $.ajax({
                type: 'POST',
                url: "/operator/getOfflineTaskList",
                async: true,
                dataType: 'json',
                data: {
                    page: page_current,
                    limit: page_limit,
                    method: "线下",
                    status: status

                },
                contentType: "application/x-www-form-urlencoded",
                success: function (res) {
                    console.log(res)
                    task_list = res.data
                    max_page = Math.ceil(res.totalcount / page_limit)
                    buildTableFooter(max_page)
                    buildTableBody(res.data)
                },
                error: function (err) {
                    // console.log(JSON.stringify(err))
                    Toast.fire({
                        icon: 'error',
                        title: ' 请重试'
                    })
                    return false
                }
            });
            $("#turnPages").on("click", "li", function (data) {
                let activePage = $(this).data("page")
                if (activePage === -2) {
                    return
                } else if (activePage === 0) {
                    if (page_current != 1) {
                        page_current = page_current - 1
                    }
                } else if (activePage === -1) {
                    if (page_current != max_page) {
                        page_current = page_current + 1
                    }
                } else {
                    page_current = activePage
                }
                $("#turnPages").children().eq(page_current + 1).addClass("active").siblings().removeClass("active")
                $.ajax({
                    type: 'POST',
                    url: '/operator/getOfflineTaskList',
                    async: true,
                    dataType: 'json',
                    data: {
                        page: page_current,
                        limit: page_limit,
                        method: "线下",
                        status: status
                    },
                    contentType: "application/x-www-form-urlencoded",
                    success: function (res) {
                        console.log(res)
                        let page_count = (Math.ceil(res.totalcount / page_limit))
                        // buildTableFooter(page_count)
                        task_list = res.data
                        buildTableBody(res.data)
                    },
                    error: function (err) {
                        // console.log(JSON.stringify(err))
                        Toast.fire({
                            icon: 'error',
                            title: ' 请重试'
                        })
                        return false
                    }
                });
            })
        })
        function buildTableFooter(data) {
            let pageNum = data
            console.log(pageNum)
            if (pageNum === 0) {
                pageNum = 1
                max_page = 1
            }
            console.log(pageNum)
            let $a
            // console.log($("#turnPages").children("li:first"))
            $("#turnPages").children("li:first").next().nextAll().remove()
            let $arrow = '<li class="page-item" data-page="-1"><a class="page-link" href="javascript:void(0);">&raquo;</a></li>'
            $("#turnPages").children("li:first").next().after($arrow)
            for (let i = pageNum; i > 0; i--) {
                $a = "<li class=\"page-item\" data-page=\"" + i + "\"><a class=\"page-link\" href=\"javascript:void(0);\" >" + i + "</a></li>"
                $("#turnPages").children("li:first").next().after($a)
            }
            // $("#turnPages").children("li:first").next().next().addClass("active")

            $("#turnPages").children().eq(page_current + 1).addClass("active")
        };
        $(".dropdown-menu").on("click", "a", function () {
            // console.log($(this).attr("tabindex"))
            page_limit = $(this).attr("tabindex")
            $(".dropdown-toggle").text("每页" + page_limit + "条")
            page_current = 1
            $.ajax({
                type: 'POST',
                url: '/operator/getOfflineTaskList',
                async: true,
                dataType: 'json',
                data: {
                    page: page_current,
                    limit: page_limit,
                    method: "线下",
                    status: status

                },
                contentType: "application/x-www-form-urlencoded",
                success: function (res) {
                    console.log(res)
                    max_page = Math.ceil(res.totalcount / page_limit)
                    buildTableFooter(max_page)
                    task_list = res.data
                    buildTableBody(res.data)
                },
                error: function (err) {
                    // console.log(JSON.stringify(err))
                    Toast.fire({
                        icon: 'error',
                        title: ' 请重试'
                    })
                    return false
                }
            });
        })
        function buildTableBody(data) {
            let $tr
            if (data.length === 0) {
                $("#pageBody").empty()
                $tr = ' <td valign="top" colspan="8" class="dataTables_empty" style="text-align:center">空空如也~</td>'
                $("#pageBody").append($tr)
            }
            else {
                let pageData = data.reverse()
                $("#pageBody").empty()
                $tr = new Array()
                console.log(pageData.length)
                for (let i = 0; i < pageData.length; i++) {
                    $tr = []
                    $tr.push("<tr id=\"" + i + "\">")
                    $tr.push("<td style=\"text-align: center;\">" + pageData[i].id + "</td >")
                    $tr.push("<td style=\"text-align: center;\"有个问题就是  日志没有时间  json用key作为顺序吗>" + pageData[i].name + "</td>")
                    $tr.push("<td style=\"text-align: center;\">" + pageData[i].sex + "</td>")
                    $tr.push("<td style=\"text-align: center;\">" + pageData[i].repairMethod + "</td>")
                    $tr.push("<td style=\"text-align: center;\">" + pageData[i].startDate + "</td>")
                    if (pageData[i].endDate != null) {
                        $tr.push("<td style=\"text-align: center;\">" + pageData[i].endDate + "</td>")
                    } else {
                        $tr.push("<td style=\"text-align: center;\"></td>")
                    }
                    if (pageData[i].status === "未处理") {
                        $tr.push("<td style=\"text-align: center;\"><span class=\"badge bg-danger\" >未处理</span></td>")
                        $tr.push("<td style=\"text-align: center;\"><button type=\"button\" class=\"btn  btn-info btn-xs \"  style=\"width:40px;\"id=\"detail_btn\" data-toggle=\"modal\" data-target=\"#modal_detail\">详情</button>")
                        $tr.push("<button type=\"button\" class=\"btn btn-danger btn-xs select_btn\" style=\"width:40px;margin-left:5px\" data-toggle=\"modal\" data-target=\"#modal_cancel\">取消</button></td>")
                    } else if (pageData[i].status === "已完成") {
                        $tr.push("<td style=\"text-align: center;\"><span class=\"badge bg-success\" >已完成</span></td>")
                        $tr.push("<td style=\"text-align: center;\"><button type=\"button\" class=\"btn  btn-info btn-xs \"  style=\"width:40px\"id=\"detail_btn\" data-toggle=\"modal\" data-target=\"#modal_detail\">详情</button>")
                        $tr.push("<button type=\"button\" class=\"btn btn-info btn-xs log_btn\" style=\"width:40px;margin-left:5px\" data-toggle=\"modal\" data-target=\"#modal_log\">日志</button></td>")
                    } else if (pageData[i].status === "取消") {
                        $tr.push("<td style=\"text-align: center;\"><span class=\"badge bg-warning\" >已取消</span></td>")
                        $tr.push("<td style=\"text-align: center;\"><button type=\"button\" class=\"btn  btn-info btn-xs \"  style=\"width:40px\"id=\"detail_btn\" data-toggle=\"modal\" data-target=\"#modal_detail\">详情</button>")
                        $tr.push("<button type=\"button\" class=\"btn btn-info btn-xs log_btn\" style=\"width:40px;margin-left:5px\" data-toggle=\"modal\" data-target=\"#modal_log\">日志</button></td>")
                    } else {
                        $tr.push("<td style=\"text-align: center;\"><span class=\"badge bg-info\" >处理中</span></td>")
                        $tr.push("<td style=\"text-align: center;\"><button type=\"button\" class=\"btn  btn-info btn-xs \"  style=\"width:40px\"id=\"detail_btn\" data-toggle=\"modal\" data-target=\"#modal_detail\">详情</button>")
                        $tr.push("<button type=\"button\" class=\"btn btn-info btn-xs log_btn\" style=\"width:40px;margin-left:5px\" data-toggle=\"modal\" data-target=\"#modal_log\">日志</button>")
                        $tr.push("<button type=\"button\" class=\"btn btn-success btn-xs select_btn\" style=\"width:40px;margin-left:5px\" data-toggle=\"modal\" data-target=\"#modal_finish\" >完成</button>")
                        $tr.push("<button type=\"button\" class=\"btn btn-danger btn-xs select_btn\" style=\"width:40px;margin-left:5px\" data-toggle=\"modal\" data-target=\"#modal_cancel\">取消</button></td>")
                    }
                    $tr.push("</tr>")
                    $tr = $tr.join("")
                    $("#pageBody").append($tr)
                }
            }
        }
        $("#pageBody").on("click", ".log_btn", function (data) {
            console.log("点击")
            $("#log_text").val("")
            current_id = parseInt($(this).parent().parent().children("td:first").text())
            $.ajax({
                type: 'POST',
                url: '/operator/getTaskDetail',
                async: true,
                data: {
                    "id": current_id
                },
                dataType: 'Text',
                contentType: "application/x-www-form-urlencoded",
                success: function (res) {
                    // console.log(JSON.parse(res))
                    // console.log(JSON.parse(res).data[0].taskLog)
                    taskLog = JSON.parse(res).data[0].taskLog
                    buildTimeline("modify")
                },
                error: function (err) {
                    console.log(err)
                    Toast.fire({
                        icon: 'error',
                        title: ' 请重试'
                    })
                    return false
                }
            });
        })
        Date.prototype.Format = function (fmt) { // author: meizz
            var o = {
                "M+": this.getMonth() + 1, // 月份
                "d+": this.getDate(), // 日
                "h+": this.getHours(), // 小时
                "m+": this.getMinutes(), // 分
                "s+": this.getSeconds(), // 秒
                "q+": Math.floor((this.getMonth() + 3) / 3), // 季度
                "S": this.getMilliseconds() // 毫秒
            };
            if (/(y+)/.test(fmt))
                fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
            for (var k in o)
                if (new RegExp("(" + k + ")").test(fmt)) fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
            return fmt;
        }
        function buildTimeline(str) {
            $(".timeline").children("#timeline_start_" + str).nextAll().remove()
            if (taskLog == null) {
                taskLog = []
            }
            if (taskLog.length != 0) {
                let $tr = []
                for (let i = taskLog.length - 1; i >= 0; i--) {
                    $tr.push('<div><i class="fas fa-user bg-blue"></i><div class="timeline-item">')
                    $tr.push('<span class="time"><i class="fas fa-clock"></i> ' + taskLog[i].date + '</span>')
                    if (taskLog[i].delete == 0) {
                        $tr.push('<h3 class="timeline-header">提交了一份日志</h3><div class="timeline-body">' + taskLog[i].log + '</div>')
                    } else {
                        $tr.push('<h3 class="timeline-header">提交了一份日志</h3><div class="timeline-body" style="text-decoration:line-through">' + taskLog[i].log + '</div>')
                    }
                    $tr.push('<div class="timeline-footer" style="display:flex" id="' + i + '">')
                    if (str === "modify") {
                        if (taskLog[i].delete == 0 || taskLog[i].delete === null) {
                            $tr.push('<a class="btn btn-danger btn-sm" style="margin-left:auto" id="delete_log_btn">删除日志</a></div></div></div>')
                        } else {
                            $tr.push('</div></div></div>')
                        }
                    } else {
                        $tr.push('</div></div></div>')
                    }
                }
                $tr.push('<div><i class="fas fa-clock bg-gray"></i></div>')
                $tr = $tr.join("")
                $(".timeline").children("#timeline_start_" + str).after($tr)
            }
            if (str === "modify") {
                $(".timeline").off("click", "#submit_log_btn").on("click", "#submit_log_btn", function () {
                    if ($("#log_text").val() == "") {
                        Toast.fire({
                            icon: 'error',
                            title: ' 内容不能为空'
                        })
                    } else {
                        taskLog.push({ "log": $("#log_text").val(), "date": new Date().Format("yyyy-MM-dd hh:mm:ss"), "delete": 0 })
                        $.ajax({
                            type: 'POST',
                            url: '/operator/modifyTaskLog',
                            async: true,
                            data: JSON.stringify({
                                "id": current_id,
                                "taskLog": taskLog,
                                "delete": 0
                            }),
                            dataType: 'Text',
                            contentType: "application/json",
                            success: function (res) {
                                Toast.fire({
                                    icon: 'success',
                                    title: ' 发布成功'
                                })
                                $("#log_text").val("")
                                buildTimeline("modify")
                            },
                            error: function (err) {
                                console.log(err)
                                Toast.fire({
                                    icon: 'error',
                                    title: ' 请重试'
                                })
                                return false
                            }
                        });
                    }
                })
            }
            $(".timeline").off("click", "#delete_log_btn").on("click", "#delete_log_btn", function () {
                // console.log($(this).parent().attr("id"))
                let logId = $(this).parent().attr("id")
                taskLog[logId].delete = 1
                $.ajax({
                    type: 'POST',
                    url: '/operator/modifyTaskLog',
                    async: true,
                    data: JSON.stringify({ "id": current_id, "taskLog": taskLog }),
                    dataType: 'Text',
                    contentType: "application/json",
                    success: function (res) {
                        Toast.fire({
                            icon: 'success',
                            title: ' 删除成功'
                        })
                        buildTimeline("modify")
                    },
                    error: function (err) {
                        console.log(err)
                        Toast.fire({
                            icon: 'error',
                            title: ' 请重试'
                        })
                        return false
                    }
                });
            })
        }
        $("#pageBody").on("click", ".select_btn", function (data) {
            console.log("点击")
            current_id = parseInt($(this).parent().parent().children("td:first").text())
        })
        $("#cancel_btn").on("click", function (data) {
            // console.log("取消")
            $.ajax({
                type: 'POST',
                url: '/operator/cancelOfflineTask',
                async: true,
                data: {
                    "id": current_id
                },
                dataType: 'Text',
                contentType: "application/x-www-form-urlencoded",
                success: function (res) {
                    Toast.fire({
                        icon: 'success',
                        title: ' 取消成功'
                    })
                    setTimeout(function () { window.location.href = "./waitingTaskList" }, 1000);
                },
                error: function (err) {
                    console.log(err)
                    Toast.fire({
                        icon: 'error',
                        title: ' 请重试'
                    })
                    return false
                }
            });
            // console.log(data)
        })
        $("#finish_btn").on("click", function (data) {
            // console.log("取消")
            $.ajax({
                type: 'POST',
                url: '/operator/finishOfflineTask',
                async: true,
                data: {
                    "id": current_id
                },
                dataType: 'Text',
                contentType: "application/x-www-form-urlencoded",
                success: function (res) {
                    Toast.fire({
                        icon: 'success',
                        title: ' 修改成功'
                    })
                    setTimeout(function () { window.location.href = "./waitingTaskList" }, 1000);
                },
                error: function (err) {
                    console.log(err)
                    Toast.fire({
                        icon: 'error',
                        title: ' 请重试'
                    })
                    return false
                }
            });
            // console.log(data)
        })
        $("#pageBody").on("click", "#detail_btn", function () {
            // console.log("查看详情")
            current_id = parseInt($(this).parent().parent().children("td:first").text())
            let task_detail
            for (let i = 0; i < task_list.length; i++) {
                if (task_list[i].id == current_id) {
                    task_detail = task_list[i]
                    break
                }
            }

            $.ajax({
                type: 'POST',
                url: '/operator/getTaskDetail',
                async: true,
                data: {
                    "id": current_id
                },
                dataType: 'Text',
                contentType: "application/x-www-form-urlencoded",
                success: function (res) {
                    // console.log(JSON.parse(res))
                    // console.log(JSON.parse(res).data[0].taskLog)

                    taskLog = JSON.parse(res).data[0].taskLog

                    buildTimeline("detail")
                    imgSrc = JSON.parse(res).data[0].pictureUrl
                    var $li = []
                    for (var i = 0; i < imgSrc.length; i++) {
                        $li.push('<li style="display:flex"><img class="content-img-list-item" src="' + imgSrc[i] + '" alt=""></li>')
                    }
                    $li.join("")
                    $(".content-img-list_show").html($li);

                },
                error: function (err) {
                    console.log(err)
                    Toast.fire({
                        icon: 'error',
                        title: ' 请重试'
                    })
                    return false
                }
            });
            // taskLog = task_detail.taskLog
            // buildTimeline("detail")
            $.ajax({
                type: 'POST',
                url: '/operator/getMemberList',
                async: true,
                data: {
                    "page": 1,
                    "limit": 100,
                    "role": "所有权限"
                },
                dataType: 'Text',
                contentType: "application/x-www-form-urlencoded",
                success: function (res) {
                    // console.log(JSON.parse(res))
                    // console.log(JSON.parse(res).data)
                    member_list = JSON.parse(res).data
                    // console.log("修改")
                    $("#member_select").empty()
                    for (let i = member_list.length - 1; i >= 0; i--) {
                        $("#member_select").append(" <option>" + member_list[i].name + "</option>")
                    }
                    $.ajax({
                        type: 'POST',
                        url: '/operator/getTaskDetail',
                        async: true,
                        data: {
                            "id": current_id
                        },
                        dataType: 'Text',
                        contentType: "application/x-www-form-urlencoded",
                        success: function (res) {
                            if (JSON.parse(res).data.length != 0) {
                                console.log(JSON.parse(res).data[0].nameList)
                                // $("#member_select").selectpicker('val',JSON.parse(res).data[0].nameList).trigger("change");
                                $("#member_select").val(JSON.parse(res).data[0].nameList).trigger("change")
                            }
                            if (task_detail.status == "未处理" || task_detail.status == "处理中") {
                                $('#member_select').attr("disabled", false);
                            } else {
                                $('#member_select').attr("disabled", true);
                            }
                            // console.log(JSON.parse(res).data[0])
                            // console.log(JSON.parse(res).data)
                        },
                        error: function (err) {
                            console.log(err)
                            Toast.fire({
                                icon: 'error',
                                title: ' 请重试'
                            })
                            return false
                        }
                    });
                },
                error: function (err) {
                    console.log(err)
                    Toast.fire({
                        icon: 'error',
                        title: ' 请重试'
                    })
                    return false
                }

            });
            if (status == "未处理" || status == "处理中") {
                $("#member_submit_btn").show()
            } else {
                $("#member_submit_btn").hide()
            }
            console.log(task_detail.status)
            $("#detail_name").text(task_detail.name)
            $("#detail_tel").text(task_detail.telephone)
            $("#detail_gender").text(task_detail.sex)
            $("#detail_address").text(task_detail.address)
            $("#detail_id").text(task_detail.id)
            $("#detail_repairMethod").text(task_detail.repairMethod)
            $("#detail_status").text(task_detail.status)
            $("#detail_computerType").text(task_detail.computerType)
            $("#detail_description").text(task_detail.description)
            $("#detail_endDate").text(task_detail.endDate)
            $("#detail_startDate").text("报修时间：" + task_detail.startDate)

        })
        $("#member_submit_btn").on("click", function () {
            // console.log($("#member_select").val())
            let nameList = $("#member_select").val()
            let idList = []
            for (let i = 0; i < nameList.length; i++) {
                for (let j = 0; j < member_list.length; j++) {
                    if (member_list[j].name === nameList[i]) {
                        idList[i] = member_list[j].account
                    }
                }
            }
            console.log(nameList)
            console.log(idList)
            $.ajax({
                type: 'POST',
                url: '/operator/releaseOfflineTask',
                async: true,
                data: {
                    "id": current_id,
                    "idList": new String(idList),
                    "nameList": new String(nameList)
                },
                dataType: 'Text',
                contentType: "application/x-www-form-urlencoded",
                success: function (res) {
                    Toast.fire({
                        icon: 'success',
                        title: ' 修改成功'
                    })
                    setTimeout(function () { window.location.href = "./waitingTaskList" }, 1000);
                },
                error: function (err) {
                    console.log(err)
                    Toast.fire({
                        icon: 'error',
                        title: ' 请重试'
                    })
                    return false
                }
            });
        })

    </script>
    <script>
        $(".nav-tabs").children().on("click", function () {
            // console.log($(this).text())
            if ($(this).text().trim() == "所有任务") {
                status = "所有状态"
            } else if ($(this).text().trim() == "已取消") {
                status = "取消"
            } else {
                status = $(this).text().trim()
            }
            page_current = 1
            $.ajax({
                type: 'POST',
                url: "/operator/getOfflineTaskList",
                async: true,
                dataType: 'json',
                data: {
                    page: page_current,
                    limit: page_limit,
                    method: "线下",
                    status: status

                },
                contentType: "application/x-www-form-urlencoded",
                success: function (res) {
                    console.log(res)
                    max_page = Math.ceil(res.totalcount / page_limit)
                    task_list = res.data
                    buildTableFooter(max_page)
                    if (status != "未处理" || status != "处理中") {
                        $("#member_submit_btn").hide()
                    } else {
                        $("#member_submit_btn").show()
                    }
                    buildTableBody(res.data)
                },
                error: function (err) {
                    // console.log(JSON.stringify(err))
                    Toast.fire({
                        icon: 'error',
                        title: ' 请重试'
                    })
                    return false
                }
            });
        })

    </script>
</body>

</html>